<script setup>
import { computed, onBeforeMount, onMounted, ref } from 'vue';
import { useRouter, onBeforeRouteUpdate, useRoute } from 'vue-router';
import { getCategory } from '@/apis/category';

const router = useRouter()
const route = useRoute()


const category = ref([])

const activeIndex = ref(1)
onMounted(async () => {
  const res = await getCategory()
  category.value = res.data
  activeIndex.value = route.path

})



</script>

<template>
  <el-header class="top1">
    <el-scrollbar>

      <el-menu :ellipsis="false" mode="horizontal" :router="true" @select="handleSelect" :default-active="activeIndex">
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item v-for="item in category" :key="item.id" :index="`/home/post/${item.categoryId}`">
          {{ item.categoryName }}
        </el-menu-item>
      </el-menu>
    </el-scrollbar>
  </el-header>
</template>

<style lang='scss'>
.top1 {
  height: 60px;
  padding: 0;
  margin-top: $tarBar-height;
  border-bottom: 1px solid $no-highlight-color;

  /* 隐藏滚动条 */
  .el-scrollbar__thumb {
    display: none !important;
  }
}
</style>